<template>
  <div class="h-full flex flex-col overflow-y-scroll bg-#F8F7F7">
    <div>
      <img :src="fileBaseUrl + goodsData.pic" class="w-100%" alt="">
      <div class="w-full flex flex-col gap-2 bg-white p-5">
        <p class="text-4 text-#333">
          {{ goodsData.name }}
        </p>
        <div class="flex justify-between">
          <div class="text-3.5 text-#F7580A">
            <span class="font-600">{{ goodsData.score }}</span>
            <span class="p-l-0.5 text-3">积分</span>
          </div>
          <div class="text-3 text-#999">
            剩余：<span class="">{{ goodsData.restCount }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="m-t-3 w-full flex flex-grow flex-col bg-white p-5">
      <div>
        <p class="text-#333">
          商品详情
        </p>
        <p class="mt-2 indent-2em text-#666">
          {{ goodsData.goodsDesc }}
        </p>
      </div>
      <div class="m-b-5 m-t-15 flex flex-col items-center justify-center gap-2 p-b-2">
        <Btn class="w-40" @click="showOrderConfirmation = true">
          立即兑换
        </Btn>
        <span class="text-3 text-#EA6740">剩余积分：{{ userStore.getUserInfo.score }}</span>
      </div>
    </div>
    <OrderConfirmation v-model:show="showOrderConfirmation" :goods-data="goodsData" @get-detail="getData" />
  </div>
</template>

<script lang='ts' setup>
import OrderConfirmation from './OrderConfirmation/index.vue'
import { getGoodsById } from '@/api/mall'
import type { IGoodsData } from '@/api/mall/types'
import Btn from '@/components/Btn.vue'
import { useUserStoreWidthOut } from '@/store/modules/user'

const showOrderConfirmation = ref(false)
const userStore = useUserStoreWidthOut()
const fileBaseUrl = import.meta.env.VITE_GLOB_IMG_URL

const route = useRoute()
const goodsData = ref<IGoodsData>({} as IGoodsData)
async function getData() {
  const res = await getGoodsById(route.query.id as string)
  goodsData.value = res.data
}

watch(() => route.query.id, (id) => {
  if (id) {
    getData()
  }
}, { immediate: true })
</script>

<style lang='less' scoped>
</style>
